<template>
    <div class="app-container">
      <div class="elRow">
        <div style="padding: 0 0 30px; display: flex;width: 100%;">
          <div
            v-for="(totalItem, totalIndex) in totalData"
            :key="totalIndex"
            style="margin-right: 16px;width: 50%;background: linear-gradient( 90deg, #108FAE 0%, #005266 100%);border-radius: 8px;"
          >
            <div
              style="
                text-align: center;
                line-height: 42px;
                border-bottom: none;
                color: #fff;
                font-weight: 500;
              "
            >
              {{ totalItem.label }}
            </div>
            <div
              class="Grid Grid--1of4 Grid--center Grid--justifyCenter text-center"
              style="width: calc(100%); padding: 0 2px 2px 0"
            >
              <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
                <div class="text-xl mb-1" style="color: #222222;font-size: 20px;">{{ totalItem.value['orders'] }}</div>
                <div style="color: #666666;font-size: 14px;">订单数</div>
              </div>
              <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
                <div class="text-xl mb-1" style="color: #222222;font-size: 20px;">{{ totalItem.value['sales'] }}</div>
                <div style="color: #666666;font-size: 14px;">成交数</div>
              </div>
              <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
                <div v-if="totalItem.value['amount'] != undefined" class="text-xl mb-1" style="color: #222222;font-size: 20px;">
                  &yen;{{ totalItem.value['amount'] }}
                </div>
                <div style="color: #666666;font-size: 14px;">总金额</div>
              </div>
              <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
                <div v-if="totalItem.value['pay_amount'] != undefined" class="text-xl mb-1" style="color: #222222;font-size: 20px;">
                  &yen;{{ totalItem.value['pay_amount'] }}
                </div>
                <div style="color: #666666;font-size: 14px;">实收金额</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 查询 -->
        <el-row>
          <el-col>
            <el-input
              v-model="query.order_no"
              class="ya-search-value mr-6 mb-2"
              placeholder="请输入订单号ID"
              clearable
            />
            <div class="mr-6 mb-2" style="display: inline-block; color: rgb(123 125 129)">
              <span>支付时间:</span>
              <el-date-picker
                v-model="query.date_value"
                type="datetimerange"
                class="ya-date-value mb-2"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :shortcuts="dateShortcuts"
                @change="search()"
                popper-class="datetimerange-style"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="[new Date(2024, 1, 1, 0, 0, 0), new Date(2024, 1, 1, 23, 59, 59)]"
              />
            </div>
            <el-select
              v-model="query.pay_type"
              class="ya-search-value mr-6 mb-2"
              clearable
              placeholder="筛选支付方式"
            >
              <el-option
                v-for="item in payList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="query.nick"
              class="ya-search-value mr-6 mb-2"
              placeholder="请输入粉丝昵称"
              clearable
            />
            <el-select
              v-model="query.status"
              class="ya-search-value mr-6 mb-2"
              clearable
              placeholder="筛选订单状态"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-tree-select
              v-if="role_ids.includes(1) || role_ids.includes(4)"
              class="ya-search-value mr-6 mb-2"
              v-model="query.dept_id"
              :data="dept_list"
              :props="{
                children: 'children', //自定义属性
                label: 'dept_name',
                value: 'dept_id'
              }"
              filterable
              clearable
              placeholder="所属组"
              default-expand-all
              :render-after-expand="false"
              check-strictly
            />
            <el-select
              v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
              v-model="query.user_id"
              filterable
              class="ya-search-value mr-6 mb-2"
              clearable
              placeholder="请选择销售人员"
            >
              <el-option
                v-for="item in user_list"
                :key="item.user_id"
                :label="item.nickname"
                :value="item.user_id"
              />
            </el-select>
            <el-input
              v-model="query.name"
              class="ya-search-value mr-6 mb-2"
              placeholder="收款商户"
              clearable
            />
            <!-- <el-select v-model="query.market_id" class="mr-2 mb-2" style="width: 160px" clearable placeholder="发票状态">
              <el-option value="1" label="已开票" />
              <el-option value="2" label="未开票" />
            </el-select> -->
            <el-button class="mb-2" type="primary" @click="search()">查询</el-button>
            <el-button class="mb-2" title="重置" @click="refresh()">重置 </el-button>
            <el-button class="mb-2" @click="getExport">导出 </el-button>
          </el-col>
        </el-row>
      </div>
      <div style="background-color: #fff;padding: 20px 30px;border-radius: 10px;">
        <!-- 列表 -->
        <el-table
          ref="table"
          v-loading="loading"
          :data="data"
          height="calc(100vh - 490px)"
          stripe
          highlight-current-row
        >
          <el-table-column prop="order_no" label="订单号" />
          <el-table-column prop="wechat_info.title" label="公众号" />
          <el-table-column prop="pay_real" label="实付金额" show-overflow-tooltip>
            <template #default="scope">
              <div v-if="scope.row.pay_real != null">&yen;{{ scope.row.pay_real }}</div>
            </template>
          </el-table-column>
          <el-table-column label="支付方式" show-overflow-tooltip>
            <template #default="scope">
              {{ payList[scope.row.pay_type - 1].label }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" show-overflow-tooltip>
            <template #default="scope">
              {{ statusList[scope.row.pay_status].label }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
            label="销售信息"
            width="200"
          >
            <template #default="scope">
              <div>
                {{ scope.row.sale_info.nickname ? '销售员：' + scope.row.sale_info.nickname : '' }}
              </div>
              <div>
                {{ scope.row.sale_info.dept_names ? '组别：' + scope.row.sale_info.dept_names : '' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pay_time" label="支付时间" min-width="120" />
          <el-table-column prop="refund_time" label="退款时间" min-width="120" />
          <el-table-column label="收款商户" prop="merchant_info.name" min-width="120"></el-table-column>
          <el-table-column align="center" label="粉丝信息" width="180">
            <template #default="scope">
              <div style="display: flex; justify-items: center">
                <!-- <img
                  :src="scope.row.headimgurl"
                  style="width: 44px; height: 44px; border-radius: 100px; border: 1px solid #eee"
                  alt=""
                /> -->
                <div style="position: relative;width: 44px;height:44px;">
                  <img :src="scope.row.headimgurl" style="width: 44px;height:44px;border-radius: 100px;border: 1px solid #eee;" alt="">
                  <img v-if="scope.row.is_subscribe" style="position: absolute;right: 0;bottom: 0;width: 16px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/wechart.png" alt="">
                </div>
                <span class="ml-2" style="text-align: left">
                  <div>昵称：{{ scope.row.nickname }}</div>
                  <div>ID：{{ scope.row.member_id }}</div>
                </span>
              </div>
              <div class="" style="color: red">已购{{ scope.row.buy_count }}次</div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="操作" show-overflow-tooltip>
            <template #default="scope">
              <el-link
                type="primary"
                class="mr-1"
                :underline="false"
                @click="getInvoiced(scope.row)"
              >
                未开票
              </el-link>
              <el-link
                type="primary"
                class="mr-1"
                :underline="false"
                @click="getInvoiced(scope.row)"
              >
                已开票
              </el-link>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <pagination
          v-show="count > 0"
          v-model:total="count"
          v-model:page="query.page"
          v-model:limit="query.limit"
          @pagination="list"
        />
      </div>
    </div>
  </template>
  
  <script>
  import screenHeight from '@/utils/screen-height'
  import Pagination from '@/components/Pagination/index.vue'
  import { getPageLimit } from '@/utils/settings'
  import dayjs from 'dayjs'
  // import { list, userList, confirm } from '@/api/order/order'
  import { useUserStoreHook } from '@/store/modules/user'
  import { shortcuts } from '@/utils/index'
  import { myUserList } from '@/api/order/statistics'
  import { list,listExport } from '@/api/finance/index'
  import axios from 'axios'
  const userStore = useUserStoreHook()
  export default {
    name: 'OrderIndex',
    components: { Pagination },
  
    data() {
      return {
        user_list: [], //销售员
        dept_list: [], //所属组
        dateShortcuts: shortcuts,
        marketList: ['留资优惠', '不中包退', '买一送一', '新人首免', '定时秒杀', '数据分析'], //营销方案
        claimList: [], //认领列表
        // 认领入参
        claimQuery: {
          user_id: '',
          order_id: null
        },
        // 总计
        totalData: [
          { label: '累计', value: {} },
          { label: '当前条件', value: {} }
        ], //总和
        name: '内容',
        height: 680,
        loading: false, //列表加载
        categoryMap: {
          3: {
            label: '足球',
            color: '#00b42a'
          },
          4: {
            label: '篮球',
            color: '#ffbf29'
          }
        },
        // 入参
        query: {
          page: 1,
          limit: getPageLimit(),
          order_no: '',
          pay_type: null,
          name: '',
          nick: '',
          status: null,
          market_id: '',
          date_field: 'o.pay_time',
          date_value: [
            `${dayjs().startOf('month').format('YYYY-MM-DD')} 00:00:00`,
            `${dayjs().format('YYYY-MM-DD 23:59:59')}`
          ], //默认当天
          dept_id: '',
          user_id: ''
        },
        // 支付类型
        payList: [
          {
            value: '1',
            label: '微信'
          },
          {
            value: '2',
            label: '支付宝'
          },
          {
            value: '3',
            label: '余额'
          },
          {
            value: '4',
            label: '微信(第三方)'
          },
          {
            value: '5',
            label: '支付宝(第三方)'
          }
        ], //支付方式
        statusList: [
          {
            value: '0',
            label: '未支付'
          },
          {
            value: '1',
            label: '已支付'
          },
          {
            value: '2',
            label: '已退款'
          }
        ], //状态类型
        data: [], //数据列表
        count: 0, //数据总条数
        role_ids: []
      }
    },
    watch: {
      'query.dept_id': {
        handler() {
          this.user_list = []
          this.query.user_id = ''
          if (this.query.dept_id) {
            myUserList({
              dept_id: this.query.dept_id
            })
              .then((res) => {
                console.log(res)
                if (res.code == 200) {
                  this.user_list = res.data
                }
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            this.user_list = userStore.user.user_list
          }
        }
      }
    },
    created() {
      this.height = screenHeight()
      this.user_list = userStore.user.user_list
      this.dept_list = userStore.user.dept_list
      this.role_ids = userStore.user.role_ids
      if (this.role_ids.includes(3)) {
        this.query.user_id = userStore.user.user_id
      }
      this.list()
    },
    methods: {
      // 导出
      getExport () {
          // let url = import.meta.env.VITE_APP_BASE_URL+'/admin/manage.Summary/listExport'
          let url = window.location.origin+'/admin/manage.Summary/listExport'
          this.downLoadFile(url,'get', this.query)
      },
      downLoadFile(url, method = 'get', params ={}) {
      
          const tokenValue = userStore.token
          axios({
              method,
              url,
              params,
              headers: {
                  'Admintoken': tokenValue
              },
              responseType: 'blob',
          }).then(res => {
                  const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
                  const link = document.createElement('a');
                  link.href = URL.createObjectURL(blob);
                  link.setAttribute('download', '销售流水.xlsx'); // 导出文件名
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
          })
      },
      gbkconvert(gbkStr, callback) {
          var script = document.createElement('script');
          script.id = 'gbkconvert';
          script.src = 'data:text/javascript;charset=utf-8,gbkconvertCb("' + gbkStr + '");';
          document.body.appendChild(script);
          window.gbkconvertCb = (res) => {
              callback && callback(res);
          }
      },
      // 列表
      list() {
        this.loading = true
        list(this.query)
          .then((res) => {
            this.data = res.data.list
            this.count = res.data.count
            this.totalData[0].value = res.data.total
            this.totalData[1].value = res.data.this_total
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      // 查询
      search() {
        this.query.page = 1
        this.list()
      },
      // 刷新
      refresh() {
        const limit = this.query.limit
        this.query = this.$options.data().query
        this.$refs['table'].clearSort()
        this.query.limit = limit
        if (this.role_ids.includes(3)) {
          this.query.user_id = userStore.user.user_id
        }
        this.list()
      },
      // 输入搜索
      remoteMethod(query) {
        if (!query) return
        userList({
          page: 1,
          limit: 100000,
          search_field: 'nickname',
          search_exp: 'like',
          search_value: query
        }).then((res) => {
          if (res.code == 200) {
            this.claimList = res.data.list
          }
        })
      },
      // 认领人员列表
      getInvoiced(item) {
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .app-container{
  padding: 0;
  background-color: #efefef;
  .elRow{
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px 30px 5px;
    border-radius: 10px;
  }
  ::v-deep .el-tabs__nav-wrap{
    padding: 0 22px;
  }
}
  </style>